 <template>
  <el-container>
    <el-aside width="210px" class="department">
      <department-tree></department-tree>
    </el-aside>
    <el-main class="p0 pt56">
      <div class="outside-the-box">
        <div v-show="is_department_details_show" class="table-box">
          <department-details></department-details>
        </div>
        <div class="show-box department-box" v-show="is_department_right_details_show">
          <department-right-details></department-right-details>
        </div>
        <div class="show-box department-box" v-show="is_department_right_details_show">
          <header>
            部门职员列表：
          </header>
          <div class="table-box">
            <department-operation></department-operation>
            <department-table class="table"></department-table>
          </div>
        </div>
      </div>

    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from "vuex";

import DepartmentTree from "./department_tree.vue";
import DepartmentOperation from "./operation.vue";
import DepartmentDetails from "./details.vue";
import DepartmentRightDetails from "./rightdetails.vue";
import DepartmentTable from "./table.vue";

export default {
  name: "department",
  components: {
    DepartmentTree,
    DepartmentOperation,
    DepartmentDetails,
    DepartmentRightDetails,
    DepartmentTable
  },
  computed: {
    ...mapGetters("department1", [
      "is_department_details_show",
      "is_department_right_details_show"
    ])
  }
};
</script>

<style>
.department {
  width: 100%;
  height: calc(100vh - 89px);
}

.department-box {
  width: 87%;
}

.department-box:last-child {
  margin-bottom: 100px;
}

.p0 {
  padding: 0;
}
header {
  height: 60px;
  line-height: 60px;
  padding-left: 36px;
  background: #f5f7f9;
  border-bottom: 1px solid #d5dce6;
}
.table-box {
  padding: 30px 32px 32px;
}
</style>
